<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Context7 - 下一代AI开发上下文增强工具</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            font-size: 2.5rem;
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .section-title {
            position: relative;
            display: inline-block;
        }
        .section-title:after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #6e8efb, #a777e3);
            border-radius: 3px;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 3.5em;
            line-height: 0.8;
            margin-right: 0.1em;
            color: #6e8efb;
            font-weight: 700;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6 font-serif">Context7</h1>
                    <h2 class="text-2xl md:text-3xl font-medium mb-6">基于MCP协议的AI开发上下文增强工具</h2>
                    <p class="text-lg mb-8 opacity-90">实时获取最新文档和代码示例，提升大型语言模型和AI代码编辑器的准确性，为开发者提供更智能的编程体验。</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="https://github.com/upstash/context7" class="bg-white text-purple-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium flex items-center">
                            <i class="fab fa-github mr-2"></i> GitHub仓库
                        </a>
                        <a href="#getting-started" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 px-6 py-3 rounded-lg font-medium transition-colors">
                            快速开始
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="bg-white rounded-xl shadow-2xl p-2 w-full max-w-md">
                        <div class="bg-gray-800 rounded-t-lg p-3 flex items-center">
                            <div class="flex space-x-2">
                                <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                <div class="w-3 h-3 rounded-full bg-green-500"></div>
                            </div>
                            <div class="text-white text-sm ml-4">terminal</div>
                        </div>
                        <div class="bg-gray-900 text-green-400 p-4 rounded-b-lg font-mono overflow-x-auto">
                            <p class="mb-2">$ npm install context7</p>
                            <p class="mb-2">$ npx context7 --init</p>
                            <p class="mb-2">$ npx context7 serve</p>
                            <p class="text-gray-500">// 实时API文档服务已启动</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-16 px-4">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-16 section-title">核心功能</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="bg-white rounded-xl p-6 shadow-md card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-sync-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">实时文档获取</h3>
                    <p class="text-gray-600">从官方源拉取最新文档，避免AI生成过时代码，确保您始终使用最新的API版本。</p>
                </div>
                <div class="bg-white rounded-xl p-6 shadow-md card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-code"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">代码示例注入</h3>
                    <p class="text-gray-600">自动提供版本特定的代码片段，显著提升代码准确性，减少调试时间。</p>
                </div>
                <div class="bg-white rounded-xl p-6 shadow-md card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-plug"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">MCP协议兼容</h3>
                    <p class="text-gray-600">与Cursor、VSCode等工具无缝集成，简化开发工作流程，提升效率。</p>
                </div>
                <div class="bg-white rounded-xl p-6 shadow-md card-hover">
                    <div class="feature-icon mb-4">
                        <i class="fas fa-search"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能检索</h3>
                    <p class="text-gray-600">基于LLM提取相关代码和元数据，快速响应查询，精准匹配开发需求。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-4 bg-gray-100">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-16 section-title">典型应用场景</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white rounded-xl p-6 shadow-md card-hover">
                    <h3 class="text-xl font-bold mb-3 text-purple-600">快速框架开发</h3>
                    <p class="text-gray-600 mb-4">使用Next.js等流行框架时，输入"use context7"即可获取最新app router示例，大幅提升开发效率。</p>
                    <div class="bg-gray-800 text-green-400 p-3 rounded-lg font-mono text-sm">
                        <p>// 获取Next.js最新路由示例</p>
                        <p>use context7 nextjs app router</p>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-6 shadow-md card-hover">
                    <h3 class="text-xl font-bold mb-3 text-purple-600">API集成</h3>
                    <p class="text-gray-600 mb-4">为Upsun、Redis等服务生成准确配置代码，减少调试时间，确保API调用的正确性。</p>
                    <div class="bg-gray-800 text-green-400 p-3 rounded-lg font-mono text-sm">
                        <p>// 生成Redis最新配置</p>
                        <p>use context7 redis configuration</p>
                    </div>
                </div>
                <div class="bg-white rounded-xl p-6 shadow-md card-hover">
                    <h3 class="text-xl font-bold mb-3 text-purple-600">团队协作</h3>
                    <p class="text-gray-600 mb-4">通过统一文档源，降低新成员学习成本，确保团队成员使用相同版本文档，减少沟通障碍。</p>
                    <div class="bg-gray-800 text-green-400 p-3 rounded-lg font-mono text-sm">
                        <p>// 团队共享文档配置</p>
                        <p>context7 --share-config team-config.json</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-16 px-4">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-16 section-title">独特优势</h2>
            <div class="flex flex-col md:flex-row gap-12">
                <div class="md:w-1/2">
                    <div class="bg-white rounded-xl p-6 shadow-md mb-6 card-hover">
                        <h3 class="text-xl font-bold mb-3 text-purple-600">动态更新机制</h3>
                        <p class="text-gray-600">Context7直接从源获取文档，确保您始终使用最新版本，不再为过时文档困扰。系统自动监控官方源变化，实时同步更新。</p>
                    </div>
                    <div class="bg-white rounded-xl p-6 shadow-md card-hover">
                        <h3 class="text-xl font-bold mb-3 text-purple-600">广泛兼容性</h3>
                        <p class="text-gray-600">支持多种MCP客户端，包括Cursor、Windsurf等主流工具。无论是个人开发还是团队协作，都能无缝集成到您的工作流程中。</p>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-white rounded-xl p-6 shadow-md mb-6 card-hover">
                        <h3 class="text-xl font-bold mb-3 text-purple-600">开源免费</h3>
                        <p class="text-gray-600">社区驱动开发，完全开源免费。您可以自由扩展功能，定制符合自己需求的版本，与全球开发者共同打造更好的开发工具。</p>
                    </div>
                    <div class="bg-white rounded-xl p-6 shadow-md card-hover">
                        <h3 class="text-xl font-bold mb-3 text-purple-600">智能上下文感知</h3>
                        <p class="text-gray-600">基于LLM的强大理解能力，能够根据当前开发上下文提供最相关的文档和代码示例，显著提升开发效率。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section id="getting-started" class="py-16 px-4 bg-gray-100">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-16 section-title">快速开始指南</h2>
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="md:flex">
                    <div class="md:w-1/2 p-8">
                        <h3 class="text-2xl font-bold mb-6 text-purple-600">在Cursor中使用Context7 MCP</h3>
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4 font-bold">1</div>
                                <div>
                                    <h4 class="font-bold mb-2">获取MCP配置</h4>
                                    <p class="text-gray-600">找到需要使用的MCP，点击JSON，复制里面的内容。</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4 font-bold">2</div>
                                <div>
                                    <h4 class="font-bold mb-2">配置MCP文件</h4>
                                    <p class="text-gray-600">打开MCP.json文件，粘贴复制的JSON数据，然后保存。</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4 font-bold">3</div>
                                <div>
                                    <h4 class="font-bold mb-2">下载依赖</h4>
                                    <p class="text-gray-600">点击刷新按钮，等待依赖下载完成（窗口变绿）。如果自动下载失败，可以手动下载。</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="bg-purple-100 text-purple-600 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mr-4 font-bold">4</div>
                                <div>
                                    <h4 class="font-bold mb-2">使用MCP</h4>
                                    <p class="text-gray-600">在对话过程中使用指定的MCP，验证版本信息是否正确。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="md:w-1/2 bg-gray-50 p-6 flex items-center justify-center">
                        <div class="relative w-full max-w-md">
                            <div class="absolute -top-4 -left-4 w-16 h-16 bg-purple-200 rounded-lg opacity-50"></div>
                            <div class="absolute -bottom-4 -right-4 w-16 h-16 bg-blue-200 rounded-lg opacity-50"></div>
                            <div class="relative bg-white rounded-lg shadow-md overflow-hidden">
                                <div class="bg-gray-800 p-3 flex items-center">
                                    <div class="flex space-x-2 mr-4">
                                        <div class="w-2 h-2 rounded-full bg-red-500"></div>
                                        <div class="w-2 h-2 rounded-full bg-yellow-500"></div>
                                        <div class="w-2 h-2 rounded-full bg-green-500"></div>
                                    </div>
                                    <div class="text-white text-xs">MCP配置面板</div>
                                </div>
                                <div class="p-4">
                                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1751701529311-13b8e185-a6e0-4c09-ad74-0c4b97c08ac7.png" alt="Cursor中使用Context7 MCP" class="rounded border border-gray-200">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- System Requirements Section -->
    <section class="py-16 px-4">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl font-bold text-center mb-16 section-title">系统要求与安装</h2>
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="md:flex">
                    <div class="md:w-1/2 p-8">
                        <h3 class="text-2xl font-bold mb-6 text-purple-600">安装与配置</h3>
                        <p class="text-gray-600 mb-6 drop-cap">Context7是一个开源项目，完全免费使用，无需注册。只需简单几步即可完成安装配置，立即体验智能上下文增强的开发体验。</p>
                        <div class="bg-gray-800 text-green-400 p-4 rounded-lg font-mono mb-6">
                            <p class="mb-2"># 使用npm安装</p>
                            <p class="mb-2">npm install context7 -g</p>
                            <p class="mb-2"># 或者使用npx直接运行</p>
                            <p class="mb-2">npx context7 --init</p>
                            <p class="mb-2"># 启动服务</p>
                            <p>npx context7 serve</p>
                        </div>
                        <div class="flex items-center text-purple-600 font-medium">
                            <i class="fas fa-exclamation-circle mr-2"></i>
                            <span>需要Node.js v18+运行环境</span>
                        </div>
                    </div>
                    <div class="md:w-1/2 bg-purple-50 p-8 flex items-center">
                        <div class="w-full">
                            <div class="mermaid">
                                graph TD
                                    A[Node.js环境] --> B[安装Context7]
                                    B --> C[配置MCP文件]
                                    C --> D[启动服务]
                                    D --> E[IDE集成]
                                    E --> F[智能代码生成]
                                    style A fill:#f5f3ff,stroke:#7e22ce
                                    style B fill:#f5f3ff,stroke:#7e22ce
                                    style C fill:#f5f3ff,stroke:#7e22ce
                                    style D fill:#f5f3ff,stroke:#7e22ce
                                    style E fill:#f5f3ff,stroke:#7e22ce
                                    style F fill:#f5f3ff,stroke:#7e22ce
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>